<template>
  <view class="ui-chart">
    <LEchart v-show="seriesData.length" ref="chartRef" @finished="renderChart"></LEchart>
    <fui-empty v-show="!seriesData.length" :src="`${config.imageUrl}/data.png`" title="暂无数据" size="24" width="300" height="auto" color="#999"></fui-empty>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import config from '@/config'
import * as echarts from 'echarts'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart'

const props = defineProps({
  showLegend: {
    type: Boolean,
    default: true
  },
  xAxisData: {
    type: Array,
    default: [],
  },
  seriesData: {
    type: Array,
    default: [],
  },
})

const defaultOptions = {
  tooltip: {
    trigger: 'axis',
    position: ['30%', '10%'],
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  ],
}
const defaultGrid = {
  top: '30',
  left: '15',
  right: '15',
  bottom: '30',
  containLabel: true,
}
const defaultLegend = {
  bottom: 0,
  icon: 'rect',
  itemWidth: 8,
  itemHeight: 2
}
const defaultXAxis = {
  type: 'category',
  boundaryGap: false,
  axisTick: {
    show: false,
  },
  axisLine: {
    lineStyle: {
      color: '#ccc',
    },
  },
  axisLabel: {
    color: '#86909C'
  },
  data: [],
}
const defaultSeries = {
  symbol: 'none',
  name: '销售额',
  type: 'line',
  smooth: true,
  label: { show: true, position: 'top' },
  emphasis: { focus: 'series' },
  data: [],
}

const chartRef = ref(null)
const options = ref({...defaultOptions})
const renderChart = () => {
  const legendList = []
  const seriesList = []
  props.seriesData.map((item) => {
    legendList.push(item.name)
    const seriesItem = {
      ...defaultSeries,
      name: item.name,
      type: item.type || 'line',
      color: item.color || '#2C83FC',
      smooth: item.smooth || false,
      data: item.yAxisData,
    }
    if (item.linearGradient) {
      seriesItem.areaStyle = {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgba(45, 131, 252,0.8)'
					},
					{
						offset: 1,
						color: 'rgba(250, 250, 250,0.8)'
					}
				])
			}
    }
    seriesList.push(seriesItem)
  })
  options.value = {
    ...defaultOptions,
    grid: {
      ...defaultGrid,
      bottom: props.showLegend ? '30' : '5'
    },
    legend: {
      show: props.showLegend,
      ...defaultLegend,
      data: legendList,
    },
    xAxis: {
      ...defaultXAxis,
      data: props.xAxisData
    },
    series: seriesList,
  }
  chartRef.value.init(echarts, (chart) => {
    chart.setOption(options.value)
  })
}

watch(
  props,
  () => {
    renderChart()
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped>
.ui-chart {
  position: relative;
  width: 100%;
  height: 100%;

  .lime-echart {
    background-color: #fff;
    border-radius: 16rpx;
  }

  ::v-deep .fui-empty__wrap {
    height: 100%;
    background-color: #fff;
  }
}
</style>
